import { Space, Switch } from "antd";
import { useTranslation } from "react-i18next";
import { updateUserStatus, getUserPage, deleteUser } from "@/api/system/user";
import { BasicTable, useTable, useRender, FormSchema, BasicColumn } from "@/components/Table";
import TableAction from "@/components/Table/components/TableAction";

import moment from "moment";
import DetailDrawer from "./DetailDrawer";
import { useDrawer } from "@/components/Drawer";
import UserRoleModal from "./UserRoleModal";
import { useModal } from "@/components/Modal";
import DeptTree from "./DeptTree";
import { Key } from "react";
import { IconEnum } from "@/enums/appEnum";
import { Button } from "@/components/Button";
import { DICT_TYPE, getDictOptions } from "@/utils/dict";
import { useMessage } from "@/hooks/web/useMessage";

export default function UserIndex() {
	const { t } = useTranslation();
	const { createMessage } = useMessage();
	const searchFormSchema: FormSchema[] = [
		{
			label: t("system.user.username"),
			field: "username",
			component: "Input"
		},
		{
			label: t("system.user.mobile"),
			field: "mobile",
			component: "Input"
		},
		{
			label: t("system.user.status"),
			field: "status",
			component: "Select",
			componentProps: {
				options: getDictOptions(DICT_TYPE.COMMON_STATUS)
			}
		},
		{
			label: t("system.user.createTime"),
			field: "createTime",
			component: "RangePicker",
			componentProps: {
				showTime: {
					defaultValue: [moment("00:00:00", "HH:mm:ss"), moment("23:59:59", "HH:mm:ss")]
				}
			}
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t("system.user.id"),
			width: 100,
			dataIndex: "id"
		},
		{
			title: t("system.user.username"),
			dataIndex: "username"
		},
		{
			title: t("system.user.nickname"),
			dataIndex: "nickname"
		},
		{
			title: t("system.user.deptName"),
			dataIndex: "deptName"
		},
		{
			title: t("system.user.mobile"),
			dataIndex: "mobile"
		},
		{
			title: t("system.user.status"),
			dataIndex: "status",
			render: (text: number, record: any) => (
				<Switch
					checked={text === 0}
					checkedChildren="opened"
					unCheckedChildren="closed"
					onChange={checked => switchChange(checked, record)}
				/>
			)
		},
		{
			title: t("system.user.createTime"),
			dataIndex: "createTime",
			render: text => useRender.renderDate(text)
		},
		{
			title: t("system.user.action"),
			dataIndex: "action",
			fixed: "right",
			render: (_, record: any) => (
				<TableAction
					actions={[
						{
							icon: IconEnum.EDIT,
							label: t("system.user.edit"),
							onClick: handleEdit.bind(null, record)
						}
					]}
					dropDownActions={[
						{
							icon: IconEnum.EDIT,
							label: t("system.user.assigningRoles"),
							onClick: handleRole.bind(null, record)
						},
						{
							icon: IconEnum.EDIT,
							label: t("system.user.resetPassword")
						},
						{
							icon: IconEnum.DELETE,
							label: t("action.delete"),
							popConfirm: {
								title: t("common.deleteMessage"),
								placement: "left",
								confirm: handleDelete.bind(null, record)
							}
						}
					]}
				></TableAction>
			)
		}
	];

	const [registerTable, { updateTableDataRecord, reload }] = useTable({
		title: t("system.user.userAccountList"),
		api: getUserPage,
		columns,
		formConfig: {
			labelWidth: 120,
			schemas: searchFormSchema,
			showActionButtonGroup: true
		},
		useSearchForm: true,
		bordered: true
	});

	const [registerDetailDrawer, { openDrawer }] = useDrawer();

	const [registerUserModal, { openModal }] = useModal();

	/** Function */

	const handleEdit = (record: Recordable) => {
		openDrawer(true, {
			record,
			isUpdated: true
		});
	};

	const handleRole = (record: Recordable) => {
		openModal(true, {
			record
		});
	};

	const switchChange = (checked: boolean, record: any) => {
		const newStatus = checked ? 0 : 1;
		updateUserStatus(record.id, newStatus)
			.then(() => {
				updateTableDataRecord(record.key, { ...record, status: checked ? 0 : 1 });
			})
			.catch(() => {});
	};

	const insertAction = () => {
		openDrawer(true, {});
	};

	function handleSelect(keys: Key[]) {
		reload({
			searchInfo: { deptId: keys[0] }
		});
	}

	const handleDelete = async (record: Recordable) => {
		await deleteUser(record.id);
		createMessage.success(t("common.delSuccessText"));
		reload();
	};

	return (
		<div className="page">
			<div className="w-1/4 xl:w-1/5 block">
				<div className="font-s16">{t("system.user.departmentList")}</div>
				<DeptTree select={handleSelect} />
			</div>
			<div className="w-3/4 xl:w-4/5 ml-2">
				<BasicTable register={registerTable}>
					<Space slot="toolbar">
						<Button type="primary" preIcon={IconEnum.ADD} onClick={insertAction}>
							{t("system.user.insertBtn")}
						</Button>
					</Space>
				</BasicTable>
			</div>
			<DetailDrawer register={registerDetailDrawer}></DetailDrawer>
			<UserRoleModal register={registerUserModal}></UserRoleModal>
		</div>
	);
}
